<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" style="color: #000"></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.home.home_title") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container">
      <!-- 头像，名称，等级 -->
      <view class="flex top_box">
        <view class="avatar">
          <image src="/static/mf/my/rem.png" mode="aspectFill" />
        </view>
        <view class="flex1">
          <view class="name">黄小心</view>
          <view class="level">等级：矿场主</view>
        </view>
      </view>
      <!-- 功能 -->
      <view class="center_box">
        <view class="center_box_title flex">
          <view class="blue_line"></view>
          <view style="font-size: 32rpx">{{ $t("mf.my.function") }}</view>
        </view>
        <view class="flex" style="padding: 0 20rpx">
          <block v-for="(item, index) in functionList" :key="index">
            <view class="flex1 function_box" @tap.stop="handleUrl(item)">
              <view class="function_icon" :style="item.boxStyle">
                <image :src="item.image" />
              </view>
              <view class="function_name">{{ item.name }}</view>
            </view>
          </block>
        </view>
      </view>
      <!-- 其他服务 -->
      <view class="bottom_box">
        <view class="center_box_title flex" style="margin-bottom: 60rpx">
          <view class="blue_line"></view>
          <view style="font-size: 32rpx">{{ $t("mf.my.other_serve") }}</view>
        </view>
        <view class="flex" style="padding: 0 20rpx">
          <block v-for="(item, index) in otherList" :key="index">
            <view class="flex1 other_box">
              <view class="other_icon">
                <image :src="item.image" />
              </view>
              <view class="other_name">{{ item.name }}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    functionList() {
      return [
        {
          name: this.$t("mf.my.my_assets"),
          image: "/static/mf/my/assets.png",
          boxStyle: {
            width: "100rpx",
            height: "100rpx",
            background: "linear-gradient(315deg, #015FFF 0%, #4F90FF 100%)",
            boxShadow: "0px 3px 12px 0px #82B0FF",
            borderRadius: "30rpx",
          },
          url: "/pages/mf/my/functionPage/myAssets",
        },
        {
          name: this.$t("mf.my.order_center"),
          image: "/static/mf/my/order.png",
          boxStyle: {
            width: "100rpx",
            height: "100rpx",
            background: "linear-gradient(133deg, #FF8D8D 0%, #FA4C4C 100%)",
            boxShadow: "0px 3px 12px 0px #FE8E8E",
            borderRadius: "30rpx",
          },
        },
        {
          name: this.$t("mf.my.my_team"),
          image: "/static/mf/my/team.png",
          boxStyle: {
            width: "100rpx",
            height: "100rpx",
            background: "linear-gradient(315deg, #989FFF 0%, #5761E4 100%)",
            boxShadow: "0px 3px 12px 0px #A6ACFF",
            borderRadius: "30rpx",
          },
        },
        {
          name: this.$t("mf.my.invitation"),
          image: "/static/mf/my/invitation.png",
          boxStyle: {
            width: "100rpx",
            height: "100rpx",
            background: "linear-gradient(315deg, #FFC692 0%, #FF9D45 100%)",
            boxShadow: "0px 3px 12px 0px #FFB573",
            borderRadius: "30rpx",
          },
        },
      ];
    },
    otherList() {
      return [
        {
          name: this.$t("mf.my.security"),
          image: "/static/mf/my/security.png",
        },
        {
          name: this.$t("mf.my.certification"),
          image: "/static/mf/my/certification.png",
        },
        {
          name: this.$t("mf.my.serve"),
          image: "/static/mf/my/serve.png",
        },
        {
          name: this.$t("mf.my.language"),
          image: "/static/mf/my/language.png",
        },
      ];
    },
  },
  methods: {
    handleUrl(item) {
      console.log(item);
      if (item.url) {
        console.log(item.url);
        this.handleNavTo({ url: item.url });
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 40rpx 20rpx 0;
}
.top_box {
  margin-bottom: 70rpx;
}
.avatar {
  width: 140rpx;
  height: 140rpx;
  margin-right: 34rpx;
}
.avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.name {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 45rpx;
  margin-bottom: 14rpx;
}
.level {
  display: inline-block;
  min-width: 40rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  background: #ff9d45;
  border-radius: 20rpx;
  box-sizing: border-box;
}
.center_box {
  width: 710rpx;
  height: 283rpx;
  background: #ffffff;
  box-shadow: 0px 12rpx 30rpx 0px #ececec;
  border-radius: 20rpx;
  padding-top: 33rpx;
  margin-bottom: 30rpx;
}
.center_box_title {
  height: 40rpx;
  margin-bottom: 40rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
  line-height: 40rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
}
.blue_line {
  width: 10rpx;
  height: 40rpx;
  background: #015fff;
  box-shadow: 2rpx 0px 6rpx 0px #9bc0ff;
  border-radius: 9rpx;
  margin-right: 20rpx;
}
.function_box {
  position: relative;
}
.function_icon {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin-bottom: 20rpx;
}
.function_icon image {
  width: 58rpx;
  height: 58rpx;
  margin-top: 20rpx;
}
.function_name {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 40rpx;
  text-align: center;
}
.bottom_box {
  width: 710rpx;
  height: 259rpx;
  background: #ffffff;
  box-shadow: 0px 12rpx 30rpx 0px #ececec;
  border-radius: 20rpx;
  padding-top: 33rpx;
  margin-bottom: 30rpx;
}
.other_box {
  text-align: center;
}
.other_icon image {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 18rpx;
}
.other_name {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 40rpx;
}
</style>